﻿<!DOCTYPE html>

<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
    <title>ProductList</title>
    <link rel="stylesheet" href="~/css/font.css">
    <link rel="stylesheet" href="~/css/xadmin.css">
    @*<script src="~/jquery/dist/jquery.min.js"></script>*@
    <script src="~/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="~/js/xadmin.js"></script>
</head>
<body>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">商品管理</a>
            <a>
                <cite>商品管理</cite>
            </a>
        </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
        </a>
    </div>
    <div class="layui-fluid">
        @* 布局类 使用此类不会固定宽度，而是 100%自适应*@
        <div class="layui-row layui-col-space15">
            @* 设置行  列之间间隔 15px*@
            <div class="layui-col-md12">
                @* 设置列  12等分*@
                <div class="layui-card">
                    <div class="layui-card-body ">
                        @*卡片式面板面板通常用于非白色背景色的主体内*@
                        <div class="layui-col-space15">
                            <div class="layui-inline layui-show-xs-block">
                                <input type="text" id="goodstypename" name="goodsname" placeholder="请输入产品型号名" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <button type="button" class="layui-btn" id="searchbtn"><i class="layui-icon">&#xe615;</i>搜索</button>
                            </div>
                        </div>
                        <table class="layui-table" id="goodstypetablelist" lay-filter="goodstypetablelist"></table>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="insertEvent">
                <i class="layui-icon">&#xe654;</i>添加
            </button>
        </div>
    </script>
    <script type="text/html" id="typeTpl">
        {{#  if(d.bType == '0'){ }}
        BTC
        {{#  } else if(d.bType == '1'){ }}
        BCH
        {{#  } else if(d.bType == '2'){ }}
        ETH
        {{#  } else if(d.bType == '3'){ }}
        ETC
        {{#  } else if(d.bType == '4'){ }}
        LTC
        {{#  } }}
    </script>
    @*<script type="text/html" id="unitTpl">
        {{#  if(d.productUnit == '0'){ }}
        T
        {{#  } else if(d.productUnit == '1'){ }}
        G
        {{#  } else if(d.productUnit == '2'){ }}
        M
        {{#  } else if(d.productUnit == '3'){ }}
        K
        {{#  } else if(d.productUnit == '4'){ }}
        P
        {{#  } }}
    </script>*@
    <script type="text/html" id="opbar">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>
    <script type="text/javascript">      
        layui.use(['table'], function () {
            var table = layui.table;
            var options = {
                elem: '#goodstypetablelist'
                , method: 'post'
                , toolbar: '#toolbar'
                , height: 'full-170'
                , url: '/Product/ProductList/'
                , page: {
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
                }
                , limit: 20
                , limits: [20, 40, 60, 80, 100]
                , cols: [[
                    { field: 'id', title: '编号', width: 80 }
                    , { field: 'name', title: '矿机名称' }  
                    , { field: 'hashrate', title: '算力' }                    
                    //, { field: 'productUnit', title: '算力单位', templet: '#unitTpl' }
                    , { field: 'price', title: '单价' }
                    , { field: 'electricCharge', title: '电费' }
                    , { field: 'inventory', title: '库存' }
                    , { field: 'createdTime', title: '创建时间' }
                    , { field: 'remark', title: '商品说明' }
                    , { fixed: '', title: '操作', toolbar: '#opbar' }
                ]]
            };
            var goodstypeTable = table.render(options);
            //搜索事件
            $('#searchbtn').on('click', function () {
                tableReload();
            });

            //刷新表格数据
            var tableReload = function () {
                goodstypeTable.reload({
                    where: {
                        name: $('#goodstypename').val().trim()
                    },
                    page: {
                        curr: 1
                    }
                })
            }
            //打开新窗口
            var openlayer = function (title, url, w, h, full) {
                if (title == null || title == '') {
                    var title = false;
                };
                if (url == null || url == '') {
                    var url = "404.html";
                };
                if (w == null || w == '') {
                    var w = ($(window).width() * 0.9);
                };
                if (h == null || h == '') {
                    var h = ($(window).height() - 50);
                };
                var index = layer.open({
                    type: 2,
                    area: [w + 'px', h + 'px'],
                    fix: false, //不固定
                    maxmin: true,
                    shadeClose: true,
                    shade: 0.4,
                    title: title,
                    content: url,
                    end: function () {
                        tableReload();
                    }
                });
                if (full) {
                    layer.full(index);
                }
            }
            table.on('toolbar(goodstypetablelist)', function (obj) {
                switch (obj.event) {
                    case 'insertEvent':
                        openlayer('添加商品', '/Product/ProductInsert', 800, 550);
                        break;
                };
            });
            table.on('tool(goodstypetablelist)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    delfunc(data);
                } else if (obj.event === 'edit') {
                    //编辑
                    openlayer('修改商品', '/Product/ProductEdit/?id=' + data.id, 800, 550);
                }
            });
            var delfunc = function (data) {
                layer.confirm('确定删除吗', function (index) {
                    $.ajax({
                        type: 'POST',
                        url: '/Product/ProductDelete',
                        data: { id: data.id },
                        datatype: 'json',
                        success: function (data) {
                            if (data.type == 200) {
                                var layindex = layer.alert(data.content, { icon: 6 }, function () {
                                    tableReload();
                                    layer.close(layindex);
                                });
                            } else {
                                layer.alert("删除失败，或者权限不够", { icon: 5 });
                            }
                        }
                    });
                });

            }

        });

                //});

    </script>
</body>
</html>
